<template>
  <view class="pics">
	  <!-- 左侧导航栏区域 -->
    <scroll-view class="pics_nav" scroll-y>
      <view
        :class="currentIndex === index ? 'active' : ''"
        v-for="(item, index) in navList"
        :key="index"
        @click="handleNavChange(index, item)"
      >
        {{ item.cat_name }}
      </view>
    </scroll-view>
	<!-- 右侧分类区域 -->
    <scroll-view class="pics_content" scroll-y>
      <view
        class="goods_info_warp"
        v-for="(title_item, index) in content"
        :key="index"
      >
        <view class="goods_title">
          <view class="delimiter">/</view>
          <view class="title">{{ title_item.cat_name }}</view>
          <view class="delimiter">/</view>
        </view>
        <view
          class="goods_list"
          
        >
          <navigator v-for="(goods_item, index) in title_item.children"
          :key="index">
            <image mode="widthFix" :src="goods_item.cat_icon"></image>
            <view class="goods_name">{{ goods_item.cat_name }}</view>
          </navigator>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navList: [],
      content: [],
	  currentIndex: 0,
	  cates:[],
	  scrollTop:0
    };
  },
  onLoad() {
    this.getNavList();
  },
  methods: {
    async getNavList() {
      let res = await this.$myRequest({
        url: "/categories",
      });
      this.navList.push(res.cat_name);
      this.navList = res;
      this.cates = res;
      this.content = this.cates[0].children;
    },
    // 点击左侧菜单
    handleNavChange(e, i) {
      console.log(e);
      console.log(i);
	  this.currentIndex = e;
	  this.content = this.cates[e].children
	  this.scrollTop = 0
    },
  },
};
</script>

<style lang="less" scope>
.pics {
  width: 100%;
  height: 100vh;
  display: flex;
  .pics_nav {
    flex: 2;
    width: 200rpx;
    height: 100vh;
    border-right: 3rpx solid #eee;
    view {
      width: 200rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26rpx;
    }
    .active {
      color: #f00;
      border-left: 3rpx solid #f00;
    }
  }
  .pics_content {
    flex: 5;
    .goods_info_warp {
      .goods_title {
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        .title {
          padding: 0 10rpx;
        }
        .delimiter {
          color: #999;
        }
      }
      .goods_list {
		  display: flex;
		flex-wrap: wrap;
		width: 100%;
        navigator {
          width: 33.33%;
          text-align: center;
          image {
            width: 50%;
		  }
		  .goods_name{
			  font-size: 28rpx;
		  }
        }
      }
    }
  }
}
</style>
